<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局</title>
    <style>
      div {
        border-radius: 3px;
        border: 2px solid blue;
      }
      .container {
        width: 300px;
        display: flex;
        flex-direction: row;
        height: 300px;
      }
      #i1 {
        background-color: red;
        flex-basis: 100px;
        flex-grow: 1;/*占用剩余的空间*/
      }
      #i2 {
        background-color: green;
        flex-basis: 100px;
      }
      #i3 {
        flex-basis: 300px;
        background-color: red;
        flex-shrink: 2;
      }
      #i4 {
        flex-basis: 150px;
        background-color: green;
        flex-shrink: 1;
      }
    </style>
</head>
<body>
  <div class="container">
    <div id="i1"></div>
    <div id="i2"></div>
  </div>
  <div class="container">
    <div id="i3"></div>
    <div id="i4"></div>
  </div>
</body>
</html>